<template>
  <div>
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/mine">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        添加车辆
      </h1>
    </header>
    <main class="p20">
      <section class="bcf7 mb20 f20 bcfff tc">
        <img class="bg" src="../../../assets/img/myCar-Coupon/group6.png">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="mt20">
          <el-form-item label="车辆类型" prop="carType">
            <el-select v-model="form.carType" placeholder="请选择" >
              <el-option label="新能源" value="新能源"></el-option>
              <el-option label="轿车" value="轿车"></el-option>
              <el-option label="MPV" value="MPV"></el-option>
              <el-option label="SUV" value="SUV"></el-option>
              <el-option label="跑车" value="跑车"></el-option>
              <el-option label="微面" value="微面"></el-option>
              <el-option label="卡车" value="卡车"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆型号" prop="carBrand">
            <el-select v-model="form.carBrand" placeholder="请选择">
              <el-option label="panamera" value="panamera"></el-option>
              <el-option label="奥迪" value="奥迪"></el-option>
              <el-option label="本田" value="本田"></el-option>
              <el-option label="宝马" value="宝马"></el-option>
              <el-option label="雅阁" value="雅阁"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNum">
            <el-input v-model="form.carNum" placeholder="请输入您的车牌号"></el-input>
          </el-form-item>
          <el-form-item label="车主姓名">
            <el-input v-model="form.userName" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入您的手机号"></el-input>
          </el-form-item>
          <el-form-item label="照片" class="uploader">
            <el-upload class="avatar-uploader  loader tc " action="http://47.94.211.25:8080/vehicle/cars/add"
              :show-file-list="false">
              <img v-if="form.images" :src="form.images" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon  f25 mt40"></i>
              <p class="f20 ">上传车辆照片</p>
            </el-upload>
          </el-form-item>
          <ul class="footer  bcff bs  tc pf w100 jcsb f20 ">
            <li>
              <a  @click="submitForm" class="pay-order f25 cfff ">
                <i class="el-icon-plus add"></i> <span > 添加车辆</span>
              </a>
            </li>
          </ul>
        </el-form>
      </section>
    </main>
  </div>
</template>
<script>
import {addCar} from '@/api/myCard'
export default {
  data() {
    return {
      form: {
        carType:"",
        carBrand:"",
        carNum:"",
        userName:"",
        tel:"",
        images:""
      },
      rules: {
        carType:[{ required: true, message: '请选择车辆类型', trigger: 'change'  }],
        carBran:{ required: true, message: '请选择车型', trigger: 'change'  },
        carNum:{ required: true, message: '请输入车牌号', trigger: 'blur' },
        tel:{ required: true, message: '请输入手机号', trigger: 'blur' }  
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
          if (valid) {
            addCar({
              userId:1,
              carNum:this.form.carNum,
              carType:this.form.carType,
              tel:this.form.tel,
              images:this.form.images
            }).then(r=>{
              console.log(r);
              this.$router.push('addSucceed');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        }); 
    }
  }
}
</script>
<style scoped>
.loader{ outline: 2rem solid #e8e8e8;width: 150rem;height: 150rem;border-radius: 15rem;color: #bfbfbf;margin-left: 100rem;}
.uploader >>> .el-form-item__label{text-align: center;}
>>> .el-input__inner {border: none; outline: 2rem solid #e8e8e8;width: 460rem !important;border-radius: 30rem;height: 65rem;box-sizing: border-box;line-height: 65rem;padding-bottom: 10rem;margin-left: 20rem !important;position: relative;right: 0 !important; font-size: 25rem;padding: 0 40rem!important;}
>>> .el-form-item__label{background-color: #4fa2ff;color: #fff;border-radius: 30rem;line-height: 60rem;position: absolute; left: 0;top:50%;transform: translateY(-50%); font-size: 25rem;width: 145rem !important;margin-right: 10rem;}
>>> .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{display: none !important;}
>>> .el-form-item{position: relative;margin-bottom: 20rem !important;width: 650rem !important;}
>>> .el-form-item__error {top: 65rem !important;left: 20%!important;font-size: 20rem;}
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

main {margin-top: -310rem;}
main{margin-bottom: 120rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 

main section img.bg{width: 400rem;height: auto;}
ul.footer{height: 115rem;left: 0; bottom:0;padding: 0 20rem;background-color: #fff;line-height: 115rem; }
ul.footer a.pay-order{background-color: #1e72f0;padding: 20rem 255rem;border-radius: 50rem;}
</style>